App icons 應用圖示

圖示意義與平臺差異 App Icons and Platforms

1. 圖示作用

• 圖示是 App 品牌與使用者體驗的重要部分。

• 出現位置包括主螢幕、搜尋、通知、設定和分享面板等。

2. 平臺差異與形狀

圖示在系統內會自動縮放至其他場景使用，如設定頁或通知。

圖層設計 Layer Design

1. 多圖層優勢

分層的應用圖示能夠帶來深度感和生動的視覺效果

在每個平臺上，系統會根據環境光線變化和使用者的互動行為自動應用視覺效果，如高光、陰影和透明度變化等，從而增強圖示的視覺表現力。

2. 平臺圖層規則

iOS/iPadOS/macOS/watchOS：背景層 + 1~多前景層，支援 Liquid Glass 效果。

tvOS：2~5層，支援視差動效與透明深度。讓圖示看起來更有動感。比如你用遙控器選中一個圖示的時候，它會稍微浮起來，跟著你手指的動作用輕輕的晃動，還會發光。這些層之間有間隔，加上透明效果，讓圖示有種3D立體的感覺。

visionOS：背景 + 1~2前景層，模擬 3D 立體感。看起來像一個有厚度的3D圖示。你看的時候，它還會稍微變大，系統還會加上陰影讓圖示更有層次感，甚至會讓圖示有點像浮雕那樣凸出來。

圖示構建與工具 Icon Composer & Xcode

圖層構建建議

• 前景圖層應邊緣清晰，避免模糊羽化。

• 使用不透明度變化增加層次感。

• 背景建議用純色或淺到深漸變，避免複雜圖案。

• 使用向量格式（SVG/PDF）優於點陣圖格式（PNG）確保清晰縮放。

工具使用

• iOS、macOS 等圖示使用 Icon Composer 構建。

• tvOS 和 visionOS 圖示在 Xcode 中使用影象堆疊組合圖層。

• 圖示支援多個視覺模式（預設、深色、清晰、色調）。

設計規範 Design Principles

1. 簡潔清晰

• 圖示應易於辨認，避免複雜細節。

• 內容聚焦，避免鋪滿畫布。

• 圖形優於照片，避免使用 UI 截圖或 Apple 裝置圖樣。

2. 統一一致

• 跨平臺保持一致風格與結構，避免使用者誤以為是不同 App。

• 多平臺圖示應保留核心圖形元素不變。

3. 圖形構圖建議

• 多用重疊的填充圖形 + 半透明效果製造深度。

• 避免新增模擬凹陷或空洞的形狀。

• watchOS 避免使用黑色背景（易與裝置背景融合）。

4. 文字使用原則

• 圖示中避免非必要文字，不利於本地化和無障礙識別。

• 僅在品牌明確需要時加入簡短文字，避免描述類詞彙如“Watch”、“Play”。

視覺效果與系統適配 Visual Effects & Appearance

1. 系統自帶動態效果：系統自動新增高光、模糊、陰影等，避免自行疊加靜態特效。

如需自定義特效，建議用 Icon Composer 進行除錯。

1. 避免非必要的文字（Include text only when it’s essential）

圖示中儘量不使用文字，除非文字對品牌識別或使用者體驗至關重要。文字資訊在圖示中存在以下問題：

• 無法適應不同語言（不利於本地化）。

• 尺寸太小不易閱讀。

• 使圖示顯得擁擠。

• 在某些使用場景中（如圖示旁已顯示應用名稱）文字會變得冗餘。

即便是用應用首字母做識別標記也需謹慎。不應包含諸如“Watch（觀看）”、“Play（播放）”等指導性詞語，或“New（新）”、“For visionOS”等與具體上下文相關的內容。

如果是 tvOS 應用圖示，文字需置於最上層圖層，以避免在視差動畫中被裁切。

2. 優選插畫而非照片（Prefer illustrations to photos）

圖示設計建議使用插畫風格，而不是照片，因為：

• 照片細節過多，不適合在不同外觀模式或小尺寸下展示。

• 拆分圖層後照片效果會受影響。

• 插畫更能突出你想要使用者注意的特徵。

3. 避免複製 UI 元件（Avoid replicating UI components）

即使應用介面很有辨識度，也不應直接使用 UI 截圖或仿製標準元件。圖示應是內容的圖形表達，而不是使用者介面的縮影。

4. 禁止模仿 Apple 硬體（Don’t use replicas of Apple hardware products）

不要在圖示中使用 Apple 產品的仿製圖形。Apple 產品受版權保護，禁止複製用於圖示設計。

Visual Effects 視覺化效果

1. 系統處理視覺特效（Let the system handle visual effects）

在圖示設計中，應儘量依賴系統自動處理的視覺特效，而不是自行新增。這些系統效果包括模糊、層間陰影、高光、邊緣浮雕、發光等。原因如下：

• 系統提供的效果是動態的，會根據環境變化自動適配，而自定義效果是靜態的，無法響應系統變化。

• 自定義特效可能會與系統視覺效果產生衝突，影響最終呈現效果。

如果確實需要使用自定義視覺效果，應確保其目的明確，並透過 Icon Composer、Simulator 或真實裝置進行充分測試，確保視覺效果不會出現衝突。

2. 合理使用圖層分組（Create layer groupings）

iOS、iPadOS 和 macOS 支援預設、深色、清晰和色調圖示樣式，使用者可根據桌布或偏好自定義顯示效果。

1. 核心視覺元素保持一致（Keep your icon’s features consistent）

無論在預設、深色、透明或著色模式下，圖示的核心視覺特徵都應保持一致。這意味著：

• 不應在不同外觀中隨意替換或隱藏圖示中的元素。

• 保持一致性有助於使用者在切換系統外觀時，仍能輕鬆識別你的應用。

避免因圖示變化太大而影響使用者對應用的認知和查詢效率。

2. 設計風格應融入系統環境（Design dark and tinted icons to match system icons）

在深色或著色模式下，應確保圖示風格自然地融入系統整體外觀。例如：

• 深色圖示應更內斂，避免太亮的顏色。

• 透明或著色圖示視覺上更淡，需透過高對比度確保清晰度。

• 應保留預設圖示的色彩方案，但進行適當調整以適應新外觀。

一個優秀的圖示無論在哪種模式下都應清晰可辨、便於識別。

3. 以淺色圖示為基礎調整（Use your light icon as a basis for your dark icon）

製作深色圖示時，建議從淺色版圖示出發：

• 選擇與預設配色相呼應的顏色。

• 避免使用過亮的影象元素。

• 一般建議使用有色背景來提升圖示在深色模式下的對比度和可視性。

如需進一步參考，可檢視 Apple 的“深色模式”設計指南。

提供備用圖示（Alternate App Icons）

在 iOS、iPadOS、tvOS 和 visionOS 等平臺上，可以為使用者提供“設定中選擇備用圖示”的功能。例如：

• 體育類應用可提供不同球隊風格的圖示，供使用者選擇喜愛的球隊。

• 所有備用圖示應與主圖示視覺風格一致，保持內容相關性。

避免設計風格差異過大、容易與其他應用混淆的備用圖示，以維護品牌識別度和使用者體驗。

備用圖示 Alternate App Icons

• iOS、iPadOS、tvOS、visionOS 支援使用者切換備用圖示。

• 常見用途如體育 App 提供球隊樣式圖示。

• 所有備用圖示也需有變體版本，並接受 App Store 稽核。

平臺特殊要求 Platform-specific Notes

• tvOS：需保留安全區域，避免焦點縮放時圖層被裁切。

• visionOS：避免在背景中新增假凹陷圖形。

• watchOS：避免使用純黑背景。